<template>
	<view class="container">
		<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="140rpx" labelPosition="top">
			<uni-forms-item required label="报修房屋:">
				<uni-easyinput :inputBorder="false" v-model="baseFormData.address" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item required label="维修项目:">
				<uni-easyinput @focus="focus('/pages/maintenancereport/maintenanceitems/maintenanceitems')"
					suffixIcon="right" :clearable="false" :inputBorder="false" v-model="baseFormData.item"
					placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item required label="标题:">
				<uni-easyinput :inputBorder="false" v-model="baseFormData.title" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item required label="问题描述:">
				<uni-easyinput :inputBorder="false" type="textarea" v-model="baseFormData.describe" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item required label="手机号码:">
				<uni-easyinput :inputBorder="false" v-model="baseFormData.tel" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item required label="预约日期:">
				<uni-datetime-picker :border="false" type="date" :clear-icon="false" v-model="baseFormData.date"
					placeholder="请选择预计上门时间" @maskClick="maskClick" />
			</uni-forms-item>
			<uni-forms-item required label="问题附件:">
				<uni-file-picker v-model="baseFormData.enclosure" limit="9"></uni-file-picker>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">提交审核</button>
	</view>
</template>

<script>
	import {
		http
	} from '../../../utils/http';
	export default {
		data() {
			return {
				page: 1,
				count: 10,
				addData: {
					"communityId": 0,
					"detail": "",
					"houseId": 0,
					"orderDate": "",
					"phone": "",
					"problemAttachment": "",
					"repairProjectId": 0,
					"title": ""
				},
				baseFormData: {
					address: '',
					item: '',
					title: '',
					describe: '',
					tel: '',
					date: '',
					enclosure: [{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					}]
				},
			}
		},
		methods: {
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			focus(url) {
				uni.navigateTo({
					url: url,
				})
			},
			submit() {
				this.addData.detail = this.baseFormData.describe;
				this.addData.orderDate = this.baseFormData.date;
				this.addData.phone = this.baseFormData.tel;
				this.addData.title = this.baseFormData.title;
				this.addData.problemAttachment = this.baseFormData.enclosure[0].url;
				http({
					url: '/repair/add',
					method: 'post',
					data: this.addData,
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 3000,
					})
					uni.navigateTo({
						url: '/pages/maintenancereport/maintenancereport/maintenancereport'
					})
				})
			}
		},
		onLoad(options) {
			this.baseFormData.item = options.data;
			let value = uni.getStorageSync('list');
			this.baseFormData.address = value.community + value.room;
			let houseInfor = JSON.parse(uni.getStorageSync('houseInfor'));
			houseInfor.forEach((v) => {
				if (v.house.id == value.id) {
					this.addData.repairProjectId = v.secondItem.id;
					this.addData.houseId = v.house.id;
				}
			})
			this.addData.communityId = value.communityId;

		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		/deep/.uni-forms {
			width: 686rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			margin-top: 60rpx;
			box-sizing: border-box;

			.uni-forms-item {
				width: 686rpx;
				border-bottom: 1px solid #e0e0e0;
			}
		}

		button {
			width: 680rpx;
			height: 84rpx;
			background: #007aff;
			margin-top: 96rpx;
			margin-bottom: 200rpx;
		}

	}
</style>
